<template>
  <div class="captain">
    <choiceDate @getDate="getDate"/>
    <div class="funnel">
      <funnel :funnelData="funnelData" refName="captainActive"/>
    </div>
    <div class="table-box">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading">
        <el-table-column
          label="日期"
          width="120">
          <template slot-scope="scope">
            <span>{{tableFormatDate(scope.row.date)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="队长活跃">
          <template slot-scope="scope">
            <span>{{scope.row.reportCaptainActiveTeamData.captainActive}}</span>
          </template>
        </el-table-column>
        <el-table-column label="点击建房" align="center">
          <el-table-column
            label="用户数">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainClickCreateRoomUserCount}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="次数">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainClickCreateRoomCount}}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="选择场次" align="center">
          <el-table-column
            label="用户总数">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainSelectRoomTypeUserCount}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="普通场">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainSelectCommonRoomUserCount}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="大神场">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainSelectGodRoomUserCount}}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="成功建房" align="center">
          <el-table-column
            label="用户总数">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainCreateRoomSuccess}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="QQ">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainCreateRoomSuccessQQ}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="微信">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainCreateRoomSuccessWX}}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="队长身份进入倒计时" align="center">
          <el-table-column
            label="用户总数">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainCountDown}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="QQ">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainCountDownQQ}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="微信">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainCountDownWX}}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="队长身份检测分享链接" align="center">
          <el-table-column
            label="用户总数">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainCheckUrl}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="QQ">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainCheckUrlQQ}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="微信">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainCheckUrlWX}}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="队长身份结束后提交评价" align="center">
          <el-table-column
            label="用户总数">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainComment}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="QQ">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainCommentQQ}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="微信">
            <template slot-scope="scope">
              <span>{{scope.row.reportCaptainActiveTeamData.captainCommentWX}}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { formatDate } from '@/utils/utils'
import funnel from '../funnel'
import choiceDate from '../choiceDate'
export default {
  components: {
    funnel,
    choiceDate
  },
  props: {
    tabIndex: {
      type: String,
      default: '5'
    }
  },
  data () {
    return {
      loading: false,
      date: '',
      pickerOptions: {
          disabledDate (time) {
              return time.getTime() > Date.now()
          }
      },
      tableData: [],
      funnelData: {}
    }
  },
  watch: {
    tabIndex: {
      handler: function (index) {
        if (index === '5') {
          this.getData()
          this.getFunnel()
        }
      },
      immediate: true
    }
  },
  created () {
    let start = formatDate(new Date().getTime() - 3600 * 1000 * 24 * 14, 'YYYY-MM-DD')
    let end = formatDate(new Date(), 'YYYY-MM-DD')
    this.date = [start, end]
  },
  mounted () {
    // this.getCaptain()
  },
  methods: {
    getDate (date) {
      this.date = date
      this.getData()
      this.getFunnel()
    },
    async getData () {
      let params = {
        type: 1
      }
      if (this.date && this.date.length) {
        params.fromDate = this.date[0] + ' 00:00:00'
        params.toDate = this.date[1] + ' 23:59:59'
      }
      this.loading = true
      let res = await this.$http.post('/team/teamActiveData', params)
      if (res.code === '0') {
          this.tableData = res.data
      } else {
          this.$message({
              type: 'error',
              message: '系统异常，请稍后再试'
          })
      }
      this.loading = false
    },
    getFunnel () {
        this.$http.post('/team/teamActiveData', {
            fromDate: this.date[0] + ' 00:00:00',
            toDate: this.date[1] + ' 23:59:59',
            type: 2
        }).then(res => {
            this.funnelData = res.data[0].reportCaptainActiveTeamData
        })
    },
    // 时间转换
    tableFormatDate (time) {
        return formatDate(time, 'YYYY-MM-DD')
    }
  }
}
</script>
<style lang="scss" scoped>
  .date{
    span{
      margin-right: 10px;
      font-size: 14px;
    }
  }
</style>
